<script lang="ts" setup>
import { Instance } from '@/api/docker/type';
import { ref } from 'vue';
import SelectInstance from './components/SelectInstance.vue'
import SelectEnvironment from './components/SelectEnvironment.vue'
import { createUserEnvironment } from '@/api/code';
import { useUserStore } from '@/store/user';
import { Environment } from '@/api/code/environment/type';
import { router } from '@/router';
import { Result } from '@/utils/request';
import { showNotify, showToast } from 'vant';

const name = ref('');
const environment = ref({} as Environment);
const instance = ref({} as Instance);
const loading = ref(false);

const onSubmit = async () => {
    if (!name.value || !instance.value.id || !environment.value.id) {
        showToast('请填写完整的环境信息');
        return;
    }
    
    loading.value = true;
    try {
        const userStore = useUserStore();
        const res = await createUserEnvironment(
            name.value, 
            userStore.getUser, 
            instance.value, 
            environment.value
        );
        const {msg} = res as Result; 
        showToast({
            message: msg || '创建环境成功',
            position: 'top',
            icon: 'success'
        });
        router.back();
    } catch (error) {
        console.error('创建环境失败:', error);
        showNotify({
            type: 'danger',
            message: '创建环境失败，请重试',
            position: 'top'
        });
    } finally {
        loading.value = false;
    }
}

const goBack = () => {
    router.back();
}
</script>

<template>
    <div class="create-environment-page">
        <!-- 面包屑 -->
        <div class="breadcrumb-container">
            <van-breadcrumb>
                <van-breadcrumb-item to="/user/code/list">在线编程</van-breadcrumb-item>
                <van-breadcrumb-item>创建环境</van-breadcrumb-item>
            </van-breadcrumb>
        </div>
        
        <div class="create-form-container">
            <h2 class="page-title">创建新的编程环境</h2>
            
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <!-- 环境名称 -->
                    <van-field
                        v-model="name"
                        name="environmentName"
                        label="环境名称"
                        placeholder="请输入环境名称"
                        :rules="[{ required: true, message: '请填写环境名称' }]"
                    />
                    
                    <!-- 实例选择 -->
                    <SelectInstance v-model="instance" />
                    
                    <!-- 环境类型选择 -->
                    <SelectEnvironment v-model="environment" />
                </van-cell-group>
                
                <!-- 提交按钮 -->
                <div class="form-actions">
                    <van-button 
                        round 
                        plain 
                        size="normal" 
                        @click="goBack"
                    >
                        取消
                    </van-button>
                    <van-button 
                        round 
                        type="primary" 
                        native-type="submit"
                        size="normal"
                        icon="plus"
                        :loading="loading"
                        :disabled="loading"
                    >
                        {{ loading ? '创建中...' : '创建环境' }}
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.create-environment-page {
    min-height: calc(100vh - 108px);
    background-color: #f7f8fa;
    
    .breadcrumb-container {
        padding: 16px 24px;
        background-color: white;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        margin-bottom: 16px;
    }
    
    .create-form-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 16px;
        
        .page-title {
            font-size: 20px;
            font-weight: 600;
            margin: 0 0 24px;
            color: #323233;
            text-align: center;
        }
        
        .form-actions {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-top: 32px;
            
            .van-button {
                min-width: 120px;
            }
        }
    }
}
</style>